<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>简历正常版</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 最顶层开始 -->
    <div class="index_up animated ">
        <div class="qq">
            <span class="qq3d" data-char="7">7</span>
            <span class="qq3d" data-char="4">4</span>
            <span class="qq3d" data-char="7">7</span>
            <span class="qq3d" data-char="1">1</span>
            <span class="qq3d" data-char="3">3</span>
            <span class="qq3d" data-char="7">7</span>
            <span class="qq3d" data-char="8">8</span>
            <span class="qq3d" data-char="3">3</span>
            <span class="qq3d" data-char="0">0</span>
        </div>
        <div class="youpiao">
            <div class="index_img"><img src="img/youpiao.gif" alt=""><span>1.2元</span></div>
        </div>
        <div class="char3Ds collapse">
            <span class="char3D" data-char="作">作</span>
            <span class="char3D" data-char="者">者</span>
            <span class="char3D" data-char="喻">喻</span>
            <span class="char3D" data-char="博">博</span>
            <span class="char3D" data-char="文">文</span>
        </div>
        <div class="char3Ds collapse">
            <span class="char3D" data-char="前">前</span>
            <span class="char3D" data-char="端">端</span>
            <span class="char3D" data-char="两">两</span>
            <span class="char3D" data-char="年">年</span>
        </div>
        <div class="char3Ds collapse">
            <span class="char3D" data-char="个">个</span>
            <span class="char3D" data-char="人">人</span>
            <span class="char3D" data-char="简">简</span>
            <span class="char3D" data-char="历">历</span>
        </div>
        <div class="up_btn animated rubberBand ">
            <a href="javascript:;" class="up_btn1  ">常规版</a>
            <!--<a href="javascript:;" class="up_btn2">炫酷3D世界</a>-->
        </div>
    </div>
    <!-- 最顶层结束 -->
    <!--顶部导航-->
    <nav class="navbar navbar-default-y animated collapse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" >
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="img/logo.png" alt="" width="20"></a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Yubowen</a></li>
                    <li><a href="#">我的介绍</a></li>
                    <li><a href="#">我的工作经历</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">我的项目<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><span class="icon"></span><a href="#">农行体验二期</a></li>
                            <li><span class="icon"></span><a href="#">自行车管理后台</a></li>
                            <li><span class="icon"></span><a href="#">后勤投诉</a></li>
                            <li><span class="icon"></span><a href="#">信息发布</a></li>
                            <li><span class="icon"></span><a href="#">商家端</a></li>
                            <li><span class="icon"></span><a href="#">业务报修</a></li>
                            <li><span class="icon"></span><a href="#">i5我的e校园</a></li>
                            <li><span class="icon"></span><a href="#">微信小程序</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">联系我 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><span class="icon"></span><a href="">QQ:747137830</a></li>
                            <li><span class="icon"></span><a href="">tel:110</a></li>
                            <li><span class="icon"></span><a href="">wechat:CharlesYBW</a></li>
                            <li><span class="icon"></span><a href="">github: iProgremmer</a></li>
                            <li><span class="icon"></span><a href="">web:http://yubowen.xin</a></li>
                        </ul>
                    </li>

                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">去3D版</a></li>
                    <li><a href="javascript:;">2017年04月21日19:58:02</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" >小demo<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <!--顶部导航-->
    <!--立方体-->
    <div class="index_main  animated collapse">
        <!--第一屏 随便说几句-->
        <div class="section section1">
            <div class="container">
                <div class="col-md-12 text-center">
                    <h3>"您"遗失的前端工程师</h3>
                </div>
                <div class="col-md-4">
                    <p>我叫喻博文</p>
                    <p>今年25岁</p>
                </div>
                <div class="col-md-4">
                    <div class="circle">
                        <!--<img src="img/swimming.jpg" alt="">-->
                    </div>
                </div>
                <div class="col-md-4">
                    <p>现居广州</p>
                    <p>747137830@qq.com</p>
                </div>
                <div class="col-md-12">
                    <p class="rotateZ-7 text-center">权威认证</p>
                </div>
                <div class="col-md-12">
                    <p class="text-center">总要有些人为梦想而活着</p>
                </div>
            </div>
        </div>
        <!--第一屏-->

        <!--第二屏 年龄、学历、位置、离职-->
        <!--<div class="section collapse">
            <div class="container section2 ">
                <div class="row">
                    <div class="col-md-3">
                        <div class="md3">
                            <span></span>
                            <p>25 / 年龄</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="md3">
                            <span></span>
                            <p>本科 / 学历</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="md3">
                            <span></span>
                            <p>坐标 / 广州</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="md3">
                            <span></span>
                            <p>离职 / 状态</p>
                        </div>
                    </div>
                </div>
                <div class="text-center">
                    <p>两年前端开发经验</p>
                    <p>会的东西好多好多</p>
                    <p>好多的html</p>
                    <p>好多的css</p>
                    <p>好多的js</p>
                    <p>好多的框架</p>
                    <p>和好多的插件</p>
                </div>
            </div>
        </div>-->
        <!--第二屏-->

        <!--第二屏 技能-->
        <div class="section">
            <div class="container section2">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <h3>前端技能展</h3>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">H5</div>
                    <div class="col-md-10 text-center">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped"  style="width: 40%">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">CSS3</div>
                    <div class="col-md-10 text-center">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped"  style="width: 40%">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">ES5/ES6</div>
                    <div class="col-md-10 text-center">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped"  style="width: 40%">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">各种框架</div>
                    <div class="col-md-10 text-center">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped"  style="width: 40%">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">ajax</div>
                    <div class="col-md-10 text-center">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped"  style="width: 40%">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">node.js</div>
                    <div class="col-md-10 text-center">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped"  style="width: 40%">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--第二屏-->

        <!--第三屏 就职公司-->
        <div class="section ">
            <div class="container section3 clearfix">
                <ul class="nav nav3-tabs col-md-12" >
                    <li class="active">
                        <h3>北京宇信科技</h3>
                        <p>给银行写</p>
                        <p>负责前端开发</p>
                    </li>
                    <li>
                        <h3>北京宇信科技</h3>
                        <p>给银行写</p>
                        <p>负责前端开发</p>
                    </li>
                    <li>
                        <h3>北京宇信科技</h3>
                        <p>给银行写</p>
                        <p>负责前端开发</p>
                    </li>
                    <li>
                        <h3>北京宇信科技</h3>
                        <p>给银行写</p>
                        <p>负责前端开发</p>
                    </li>
                </ul>


            </div>
        </div>
        <!--第三屏-->

        <!--第四屏-->
        <div class="section">
            <div class="section4">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="5"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="6"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="7"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="img/index1.png" alt="...">
                            <div class="carousel-caption">
                                <h3>职位</h3>
                                <p>干的事情阿斯利康的就啊收到啦上课觉得卡时间段哈阿斯利康的就啊说两句</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="img/index2.png" alt="...">
                            <div class="carousel-caption">
                                <h3>职位</h3>
                                <p>干的事情阿斯利康的就啊收到啦上课觉得卡时间段哈阿斯利康的就啊说两句</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="img/index3.png" alt="...">
                            <div class="carousel-caption">
                                <h3>职位</h3>
                                <p>干的事情阿斯利康的就啊收到啦上课觉得卡时间段哈阿斯利康的就啊说两句</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="img/index4.png" alt="...">
                            <div class="carousel-caption">
                                <h3>职位</h3>
                                <p>干的事情阿斯利康的就啊收到啦上课觉得卡时间段哈阿斯利康的就啊说两句</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="img/index1.png" alt="...">
                            <div class="carousel-caption">
                                <h3>职位</h3>
                                <p>干的事情阿斯利康的就啊收到啦上课觉得卡时间段哈阿斯利康的就啊说两句</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="img/index2.png" alt="...">
                            <div class="carousel-caption">
                                <h3>职位</h3>
                                <p>干的事情阿斯利康的就啊收到啦上课觉得卡时间段哈阿斯利康的就啊说两句</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="img/index3.png" alt="...">
                            <div class="carousel-caption">
                                <h3>职位</h3>
                                <p>干的事情阿斯利康的就啊收到啦上课觉得卡时间段哈阿斯利康的就啊说两句</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="img/index4.png" alt="...">
                            <div class="carousel-caption">
                                <h3>职位</h3>
                                <p>干的事情阿斯利康的就啊收到啦上课觉得卡时间段哈阿斯利康的就啊说两句</p>
                            </div>
                        </div>


                    </div>

                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic"  data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
        <!--第四屏-->
        <div style="display: none;">
            已学技能
            HTML5
            CSS3
            JavaScript
            jQuery
            懒加载
            jQuery颜色渐变
            jQueryUI
            jQuery easing
            (安装 webstorm 和 less )
            上面是第一个月学的

            bootstrap
            fullPage.js
            animate.css -------------css动画库
            zepto.js ----------------手机端的jQuery
            swiper.js ---------------手指滑动事件
            wampserver / xampp-osx---安装Apache 服务器
            php
            ajax
            这是第二个月学的
        </div>
    </div>
    <!--立方体-->
</body>

</html>
<script src="js/jquery-1.12.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/index.js"></script>













